<template>
  <div class="tbc-flex-row" :style="outerStyle">
    <div class="tbc-flex-row" style="flex-wrap: wrap;">
      <template v-for="(item, index) in module.data">
        <div class="tbc-flex-col" style="align-items:center;"
             :key="index" :style="itemStyle" v-if="index < max">
          <div class="tbc-flex-row" style="align-items: center;justify-content: center;background-color: #FEDBAB;"
               :style="iconStyle">
            <img :src="item.icon" v-if="item.icon" :style="iconStyle"/>
          </div>
          <span :style="fontStyle">{{ item.label }}</span>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerStyle: '',
      itemStyle: '',
      iconStyle: '',
      fontStyle: '',
      module: {
        config: {
          outer: {},
          container: {},
          item: {},
          menu: {rowNumber: 5},
          font: {fontColor: ''}
        },
        data: []
      },
      max: 0
    }
  },

  methods: {
    // 初始化
    init(module) {
      this.module = module
      this.max = module.config.menu.rowNumber * module.config.menu.rows
      this.setOuterStyle()
      this.setMenuIconStyle()
      this.setMenuFontStyle()
      this.setItemStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = []
      let config = this.module.config.outer || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.paddingTop) style.push('padding-top:' + config.paddingTop / 2 + 'px')

      if (typeof config.paddingBottom !== 'undefined') {
        let paddingBottom = config.paddingBottom
        // let menuPaddingBottom = this.module.config.menu.marginBottom || 0
        // paddingBottom -= menuPaddingBottom
        // console.log(paddingBottom)
        style.push('padding-bottom:' + paddingBottom / 2 + 'px')
      }
      if (config.background) style.push('background:' + config.background)
      this.outerStyle = style.join(';')
    },

    setItemStyle() {
      let style = []
      let outer = this.module.config.outer
      let config = this.module.config.menu || {}
      config.width = outer.width / config.rowNumber
      style.push('width:' + config.width / 2 + 'px')
      if (config.marginBottom) style.push('margin-bottom:' + config.marginBottom / 2 + 'px')
      this.itemStyle = style.join(';')
    },

    // 设置导航图标样式
    setMenuIconStyle() {
      let style = []
      let config = this.module.config.icon || {}
      style.push('width:' + config.size / 2 + 'px')
      style.push('height:' + config.size / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.marginBottom) style.push('margin-bottom:' + config.marginBottom / 2 + 'px')
      this.iconStyle = style.join(';')
    },

    // 设置导航字体样式
    setMenuFontStyle() {
      let style = []
      let config = this.module.config.font || {}
      style.push('font-size:' + config.fontSize / 2 + 'px')
      style.push('color:' + config.fontColor)
      if (config.marginTop) style.push('margin-top:' + config.marginTop / 2 + 'px')
      this.fontStyle = style.join(';')
    }
  }
}
</script>